<template>
  <div class="ticket-management">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>票务信息列表</span>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" style="width: 200px; float: right;"
          @input="handleSearch"></el-input> <!-- 输入框，用于搜索票务信息。v-model用于数据双向绑定，@input监听输入事件触发搜索。 -->
      </div>
      <el-table :data="filteredTickets" border show-summary :summary-method="getSummaries" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="concertName" label="演唱会名称"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="price" label="票价" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" size="medium" @click="handleViewTickets(scope.row)">查看票务</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 模态框 -->
      <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑票务' : '票务详情'" width="30%">
        <div v-if="dialogType === 'view'">
          <p>演唱会名称: {{ currentTicket.concertName }}</p>
          <p>日期: {{ currentTicket.date }}</p>
          <p>票价: {{ currentTicket.price }}</p>
        </div>
        <div v-else-if="dialogType === 'edit'">
          <el-form :model="currentTicket" @submit.native.prevent="handleUpdateTicket">
            <el-form-item label="演唱会名称" :label-width="formLabelWidth">
              <el-input v-model="currentTicket.concertName"></el-input>
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth">
              <el-date-picker v-model="currentTicket.date" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="票价" :label-width="formLabelWidth">
              <el-input v-model="currentTicket.price"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button v-if="dialogType === 'edit'" type="primary" @click="handleUpdateTicket">
            更新
          </el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 导入 Mock.js 用于生成模拟数据
import Mock from 'mockjs';
// 导入 Element UI 组件
import { MessageBox, Input, DatePicker } from 'element-ui';

export default {
  name: 'TicketManagement', // 定义组件名称
  data() {
    return {
      // 定义组件的数据属性
      tickets: [], // 存储原始票务数据的数组
      search: '', // 用户输入的搜索关键字，用于过滤 tickets
      dialogVisible: false, // 控制模态框（对话框）的显示与隐藏
      currentTicket: null, // 当前选中的票务对象，用于编辑或查看
      dialogType: null, // 模态框类型，可以是 'view' 或 'edit'
      formLabelWidth: '120px', // 表单项标签的宽度
    };
  },
  computed: {
    // 计算属性，根据搜索关键字过滤 tickets 数组
    filteredTickets() {
      return this.tickets.filter((ticket) =>
        ticket.concertName.toLowerCase().includes(this.search.toLowerCase())
      );
    },
  },
  created() {
    // Vue 实例创建后立即执行的生命周期钩子
    this.fetchTickets(); // 初始化时获取模拟数据
  },
  methods: {
    // 获取模拟数据的方法
    fetchTickets() {
      const ticketsData = Mock.mock({
        'tickets|30': [ // 生成 30 条模拟数据
          {
            'id|+1': 1, // 自动生成递增的 ID
            'concertName': '@cname()', // 使用 Mock.js 生成演唱会名称
            'date': '@date("yyyy-MM-dd")', // 使用 Mock.js 生成日期
            'price': '@float(100, 500, 2, 2)', // 使用 Mock.js 生成票价，保留两位小数
          }
        ]
      });
      this.tickets = ticketsData.tickets; // 将模拟数据赋值给 tickets 数组
    },
    // 用于总结表格数据的方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2); // 保留两位小数
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    // 搜索方法，根据搜索关键字过滤 tickets
    handleSearch() {

    },
    // 添加票务的逻辑
    handleAddTicket() {
      // 使用 Mock.js 生成新的票务数据并添加到 tickets 数组
      const newTicket = Mock.mock({
        'id|+1': this.tickets.length + 1, // 新增票务的 ID
      });
      this.tickets.push(newTicket);
    },
    // 编辑票务的方法
    handleEdit(index, row) {
      // 复制选中的票务数据到 currentTicket
      this.currentTicket = { ...row };
      this.dialogType = 'edit'; // 设置模态框类型为编辑
      this.dialogVisible = true; // 显示模态框
    },
    // 更新票务信息的方法
    handleUpdateTicket() {
      // 查找并更新 tickets 数组中的对应票务信息
      const index = this.tickets.findIndex(ticket => ticket.id === this.currentTicket.id);
      if (index !== -1) {
        this.tickets.splice(index, 1, { ...this.currentTicket });
      }
      // 更新后关闭模态框
      this.dialogVisible = false;
    },
    // 删除票务的逻辑
    handleDelete(index) {
      // 弹出确认框，确认后删除对应索引的票务信息
      if (confirm('确定要删除这张票务吗?')) {
        this.tickets.splice(index, 1);
      }
    },
    // 查看票务详情的方法
    handleViewTickets(ticket) {
      // 设置 currentTicket 并显示模态框
      this.currentTicket = ticket;
      this.dialogType = 'view'; // 设置模态框类型为查看
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.ticket-management {
  padding: 20px;
}

.el-card {
  width: auto;
  margin-bottom: 20px;
}
</style>
